# More Actions

**Category:** Features/Actions/ More Actions

## Design

### Description

Displays a menu of more actions on a page component.

#### Usage

1. Define a [`CollectionPage`](./?path=/story/base-components-pages-collection-page--collectionpage) or [`EntityPage`](./?path=/story/base-components-pages-entity-page--entitypage) component.
1. Pass this `MoreActions` component to the `moreActions` prop on the page header component.
1. Within the component, define an array of [`MoreActionsItem`](./?path=/story/common-types--moreactionsitem) objects to display.

> **Note:** Make sure that your page is nested under a [`WixPatternsProvider`](./?path=/story/base-components-providers--wixpatternsprovider).


```tsx
import { MoreActions } from '@wix/patterns';
```

### Collection Page

This example displays a menu at the collection page level by passing a `MoreActions` component to the `moreActions` prop of the [`CollectionPage.Header`](./?path=/story/base-components-pages-collection-page--collectionpage-header).

```tsx
import { Avatar } from '@wix/design-system';
import React from 'react';
import {
  Table,
  useTableCollection,
  MoreActions,
  PrimaryActions,
} from '@wix/patterns';
import { CollectionPage } from '@wix/patterns/page';
import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
import { contacts } from '@wix/crm';

function CollectionPageDemo() {
  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-CollectionPageDemo',
    itemName: (contact) =>
      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
    fetchData: (query) => {
      const { limit, offset, search } = query;

      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

      if (search) {
        queryBuilder = queryBuilder.startsWith('info.name.first', search);
      }

      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
        items,
        total,
      }));
    },
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <CollectionPage height="400px">
      <CollectionPage.Header
        title={{ text: 'Contacts' }}
        subtitle={{ text: 'My Contacts' }}
        primaryAction={
          <PrimaryActions
            label="Do something"
            onClick={() => console.log('I do something')}
          />
        }
        moreActions={
          <MoreActions
            items={[
              {
                text: 'Do Action #1',
                prefixIcon: <InvoiceSmall />,
                onClick: () => {
                  console.log('Action #1');
                },
              },
              {
                text: 'Another Action #2',
                prefixIcon: <VisibleSmall />,
                onClick: () => {
                  console.log('Action #2');
                },
              },
            ]}
          />
        }
      />
      <CollectionPage.Content>
        <Table
          state={state}
          columns={[
            {
              id: 'avatar',
              name: 'Avatar',
              title: '',
              width: '50px',
              hideable: false,
              render: (contact) => (
                <Avatar
                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
                  imgProps={{ src: contact.info?.picture?.image }}
                />
              ),
            },
            {
              id: 'name',
              title: 'Name',
              width: '250px',
              render: (contact) =>
                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
            },
          ]}
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```

### Collection Page

With secondary actions MoreActions component will be displayed with icon only.

```tsx
import { Avatar } from '@wix/design-system';
import React from 'react';
import {
  Table,
  useTableCollection,
  MoreActions,
  PrimaryActions,
  SecondaryActions,
} from '@wix/patterns';
import { CollectionPage } from '@wix/patterns/page';
import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
import { contacts } from '@wix/crm';

function CollectionPageWithSecondaryActions() {
  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-CollectionPageWithSecondaryActions',
    itemName: (contact) =>
      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
    fetchData: (query) => {
      const { limit, offset, search } = query;

      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

      if (search) {
        queryBuilder = queryBuilder.startsWith('info.name.first', search);
      }

      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
        items,
        total,
      }));
    },
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <CollectionPage height="400px">
      <CollectionPage.Header
        title={{ text: 'Contacts' }}
        subtitle={{ text: 'My Contacts' }}
        secondaryActions={
          <SecondaryActions
            label="Do something"
            onClick={() => console.log('I do something')}
          />
        }
        moreActions={
          <MoreActions
            items={[
              {
                text: 'Do Action #1',
                prefixIcon: <InvoiceSmall />,
                onClick: () => {
                  console.log('Action #1');
                },
              },
              {
                text: 'Another Action #2',
                prefixIcon: <VisibleSmall />,
                onClick: () => {
                  console.log('Action #2');
                },
              },
            ]}
          />
        }
      />
      <CollectionPage.Content>
        <Table
          state={state}
          columns={[
            {
              id: 'avatar',
              name: 'Avatar',
              title: '',
              width: '50px',
              hideable: false,
              render: (contact) => (
                <Avatar
                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
                  imgProps={{ src: contact.info?.picture?.image }}
                />
              ),
            },
            {
              id: 'name',
              title: 'Name',
              width: '250px',
              render: (contact) =>
                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
            },
          ]}
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```

### More actions with a divider

Create groups of More Action buttons with a divider between each group. Each member of a group is defined in the same array. The groups arrays are included in the `items` array.

```tsx
import { Avatar } from '@wix/design-system';
import React from 'react';
import {
  Table,
  useTableCollection,
  MoreActions,
  PrimaryActions,
} from '@wix/patterns';
import { CollectionPage } from '@wix/patterns/page';
import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
import { contacts } from '@wix/crm';

function Toolbar() {
  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-Toolbar',
    itemName: (contact) =>
      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
    fetchData: (query) => {
      const { limit, offset, search } = query;

      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

      if (search) {
        queryBuilder = queryBuilder.startsWith('info.name.first', search);
      }

      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
        items,
        total,
      }));
    },
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <CollectionPage height="400px">
      <CollectionPage.Header
        title={{ text: 'Contacts' }}
        subtitle={{ text: 'My Contacts' }}
        primaryAction={
          <PrimaryActions
            label="Do something"
            onClick={() => console.log('I do something')}
          />
        }
        moreActions={
          <MoreActions
            items={[
              [
                {
                  text: 'Do Action #1',
                  prefixIcon: <InvoiceSmall />,
                  onClick: () => {
                    console.log('Action #1');
                  },
                },
                {
                  text: 'Another Action #2',
                  prefixIcon: <VisibleSmall />,
                  onClick: () => {
                    console.log('Action #2');
                  },
                },
              ],
              [
                {
                  text: 'Move',
                  prefixIcon: <InvoiceSmall />,
                  onClick: () => {
                    console.log('Move #1');
                  },
                },
                {
                  text: 'Duplicate',
                  prefixIcon: <VisibleSmall />,
                  onClick: () => {
                    console.log('Duplicate #2');
                  },
                },
              ],
            ]}
          />
        }
      />
      <CollectionPage.Content>
        <Table
          state={state}
          columns={[
            {
              id: 'avatar',
              name: 'Avatar',
              title: '',
              width: '50px',
              hideable: false,
              render: (contact) => (
                <Avatar
                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
                  imgProps={{ src: contact.info?.picture?.image }}
                />
              ),
            },
            {
              id: 'name',
              title: 'Name',
              width: '250px',
              render: (contact) =>
                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
            },
          ]}
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```

### More actions in the toolbar

More Actions can be in the toolbar. Pass the `MoreActions` component to the `moreActions` prop of Table/Grid etc.

```tsx
import React from 'react';
import { Page } from '@wix/design-system';
import {
  Table,
  PageWrapper,
  useTableCollection,
  OffsetQuery,
  MoreActions,
} from '@wix/patterns';
import { contacts } from '@wix/crm';
import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';

function Toolbar() {
  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-Toolbar',
    paginationMode: 'offset',
    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
    fetchData: (query: OffsetQuery) => {
      const { limit, offset, search } = query;

      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

      if (search) {
        queryBuilder = queryBuilder.startsWith('info.name.first', search);
      }

      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
        items,
        total,
      }));
    },
    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <PageWrapper>
      <Page height="400px">
        <Page.Header />
        <Page.Content>
          <Table
            state={state}
            moreActions={
              <MoreActions
                items={[
                  [
                    {
                      text: 'Do Action #1',
                      prefixIcon: <InvoiceSmall />,
                      onClick: () => {
                        console.log('Action #1');
                      },
                    },
                    {
                      text: 'Another Action #2',
                      prefixIcon: <VisibleSmall />,
                      onClick: () => {
                        console.log('Action #2');
                      },
                    },
                  ],
                  [
                    {
                      text: 'Move',
                      prefixIcon: <InvoiceSmall />,
                      onClick: () => {
                        console.log('Move #1');
                      },
                    },
                    {
                      text: 'Duplicate',
                      prefixIcon: <VisibleSmall />,
                      onClick: () => {
                        console.log('Duplicate #2');
                      },
                    },
                  ],
                ]}
              />
            }
            columns={[
              {
                id: 'name',
                title: 'Name',
                width: '250px',
                render: (contact) =>
                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
              },
            ]}
          />
        </Page.Content>
      </Page>
    </PageWrapper>
  );
}
```

### Explore related apps

Explore related apps with the `MoreActions` component. pass the explore apps modal props and we will take care of the rest.

```tsx
import { Avatar, CustomModalLayout, Modal } from '@wix/design-system';
import React from 'react';
import {
  Table,
  useTableCollection,
  MoreActions,
  PrimaryActions,
} from '@wix/patterns';
import { CollectionPage } from '@wix/patterns/page';
import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
import { contacts } from '@wix/crm';
import { ModuleRegistry } from 'react-module-container';

function ExploreApps() {
  React.useState(() => {
    // Mock explore apps modal, cause its unsupported in storybook env
    ModuleRegistry.registerComponent(
      'in-context-apps-modal',
      () =>
        ({ isOpen, title, subTitle, onClose }: any) => {
          return (
            <Modal
              isOpen={isOpen}
              onRequestClose={onClose}
              shouldDisplayCloseButton
            >
              <CustomModalLayout title={title} subtitle={subTitle}>
                <img
                  src="https://wixmp-63fb97685840e8c34a920619.wixmp.com/storybook/assets/appsmodalfake.png"
                  alt="fake gallery"
                />
              </CustomModalLayout>
            </Modal>
          );
        },
    );
  });

  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-ExploreApps',
    itemName: (contact) =>
      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
    fetchData: (query) => {
      const { limit, offset, search } = query;

      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

      if (search) {
        queryBuilder = queryBuilder.startsWith('info.name.first', search);
      }

      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
        items,
        total,
      }));
    },
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <CollectionPage height="400px">
      <CollectionPage.Header
        title={{ text: 'Contacts' }}
        subtitle={{ text: 'My Contacts' }}
        primaryAction={
          <PrimaryActions
            label="Do something"
            onClick={() => console.log('I do something')}
          />
        }
        moreActions={
          <MoreActions
            items={[
              [
                {
                  text: 'Do Action #1',
                  prefixIcon: <InvoiceSmall />,
                  onClick: () => {
                    console.log('Action #1');
                  },
                },
                {
                  text: 'Another Action #2',
                  prefixIcon: <VisibleSmall />,
                  onClick: () => {
                    console.log('Action #2');
                  },
                },
              ],
            ]}
            exploreAppsModalProps={{
              title: 'Explore Apps',
              subtitle: 'Find the right app for your business',
              tag: '7d4d7891-2995-4bb9-8d2b-457aa7dca3f2',
            }}
          />
        }
      />
      <CollectionPage.Content>
        <Table
          state={state}
          columns={[
            {
              id: 'avatar',
              name: 'Avatar',
              title: '',
              width: '50px',
              hideable: false,
              render: (contact) => (
                <Avatar
                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
                  imgProps={{ src: contact.info?.picture?.image }}
                />
              ),
            },
            {
              id: 'name',
              title: 'Name',
              width: '250px',
              render: (contact) =>
                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
            },
          ]}
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```

### Integrate with Extension

Use the `containerId` prop to extend the more actions items with items from [Slots and Plugins](./?path=/story/features-enrich-slots-and-plugins--slots-and-plugins). 

```tsx
import { Avatar } from '@wix/design-system';
import React from 'react';
import {
  Table,
  useTableCollection,
  MoreActions,
  PrimaryActions,
} from '@wix/patterns';
import { CollectionPage } from '@wix/patterns/page';
import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
import { contacts } from '@wix/crm';

function Extensions() {
  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-Extensions',
    itemName: (contact) =>
      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
    fetchData: (query) => {
      const { limit, offset, search } = query;

      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

      if (search) {
        queryBuilder = queryBuilder.startsWith('info.name.first', search);
      }

      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
        items,
        total,
      }));
    },
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <CollectionPage height="400px">
      <CollectionPage.Header
        title={{ text: 'Contacts' }}
        subtitle={{ text: 'My Contacts' }}
        primaryAction={
          <PrimaryActions
            label="Do something"
            onClick={() => console.log('I do something')}
          />
        }
        moreActions={
          <MoreActions
            containerId="cd910877-1bb2-445e-822a-aa04a342c2f5"
            items={[
              [
                {
                  text: 'Do Action #1',
                  prefixIcon: <InvoiceSmall />,
                  onClick: () => {
                    console.log('Action #1');
                  },
                },
                {
                  text: 'Another Action #2',
                  prefixIcon: <VisibleSmall />,
                  onClick: () => {
                    console.log('Action #2');
                  },
                },
              ],
            ]}
          />
        }
      />
      <CollectionPage.Content>
        <Table
          state={state}
          columns={[
            {
              id: 'avatar',
              name: 'Avatar',
              title: '',
              width: '50px',
              hideable: false,
              render: (contact) => (
                <Avatar
                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
                  imgProps={{ src: contact.info?.picture?.image }}
                />
              ),
            },
            {
              id: 'name',
              title: 'Name',
              width: '250px',
              render: (contact) =>
                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
            },
          ]}
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```

### Featured More Actions

Features like Data Extension and Tags automatically add their actions to the More Actions menu.

```tsx
import { Avatar } from '@wix/design-system';
import React from 'react';
import {
  Table,
  useTableCollection,
  PrimaryActions,
  DataExtension,
  Tags,
} from '@wix/patterns';
import { CollectionPage } from '@wix/patterns/page';
import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
import { contacts } from '@wix/crm';

function FeaturedMoreActions() {
  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-CollectionPageDemo',
    itemName: (contact) =>
      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
    fetchData: (query) => {
      const { limit, offset, search } = query;

      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

      if (search) {
        queryBuilder = queryBuilder.startsWith('info.name.first', search);
      }

      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
        items,
        total,
      }));
    },
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <CollectionPage height="400px">
      <CollectionPage.Header
        title={{ text: 'Contacts' }}
        subtitle={{ text: 'My Contacts' }}
        primaryAction={
          <PrimaryActions
            label="Do something"
            onClick={() => console.log('I do something')}
          />
        }
      />
      <CollectionPage.Content>
        <Table
          tags={
            <Tags entityTypeName="Contact" bulkUpdateTags={async () => {}} />
          }
          dataExtension={<DataExtension />}
          state={state}
          columns={[
            {
              id: 'avatar',
              name: 'Avatar',
              title: '',
              width: '50px',
              hideable: false,
              render: (contact) => (
                <Avatar
                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
                  imgProps={{ src: contact.info?.picture?.image }}
                />
              ),
            },
            {
              id: 'name',
              title: 'Name',
              width: '250px',
              render: (contact) =>
                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
            },
          ]}
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```

### Featured More Actions - Opt Out

Opt out of the Featured More Actions by passing `disableDefaultPageAction` to the relevant plugin props

```tsx
import { Avatar } from '@wix/design-system';
import React from 'react';
import {
  Table,
  useTableCollection,
  PrimaryActions,
  DataExtension,
  Tags,
} from '@wix/patterns';
import { CollectionPage } from '@wix/patterns/page';
import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
import { contacts } from '@wix/crm';

function FeaturedMoreActions() {
  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-CollectionPageDemo',
    itemName: (contact) =>
      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
    fetchData: (query) => {
      const { limit, offset, search } = query;

      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

      if (search) {
        queryBuilder = queryBuilder.startsWith('info.name.first', search);
      }

      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
        items,
        total,
      }));
    },
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <CollectionPage height="400px">
      <CollectionPage.Header
        title={{ text: 'Contacts' }}
        subtitle={{ text: 'My Contacts' }}
        primaryAction={
          <PrimaryActions
            label="Do something"
            onClick={() => console.log('I do something')}
          />
        }
      />
      <CollectionPage.Content>
        <Table
          tags={
            <Tags
              entityTypeName="Contact"
              bulkUpdateTags={async () => {}}
              disableDefaultPageAction
            />
          }
          dataExtension={<DataExtension disableDefaultPageAction />}
          state={state}
          columns={[
            {
              id: 'avatar',
              name: 'Avatar',
              title: '',
              width: '50px',
              hideable: false,
              render: (contact) => (
                <Avatar
                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
                  imgProps={{ src: contact.info?.picture?.image }}
                />
              ),
            },
            {
              id: 'name',
              title: 'Name',
              width: '250px',
              render: (contact) =>
                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
            },
          ]}
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```

### Featured More Actions - Custom Position

Customize the position of the Featured More Actions by specifying them in the `items` prop.

```tsx
import { Avatar } from '@wix/design-system';
import React from 'react';
import {
  DataExtension,
  MoreActions,
  PrimaryActions,
  Table,
  Tags,
  useTableCollection,
} from '@wix/patterns';
import { CollectionPage } from '@wix/patterns/page';
import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
import { contacts } from '@wix/crm';

function FeaturedMoreActions() {
  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-CollectionPageDemo',
    itemName: (contact) =>
      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
    fetchData: (query) => {
      const { limit, offset, search } = query;

      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

      if (search) {
        queryBuilder = queryBuilder.startsWith('info.name.first', search);
      }

      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
        items,
        total,
      }));
    },
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <CollectionPage height="400px">
      <CollectionPage.Header
        title={{ text: 'Contacts' }}
        subtitle={{ text: 'My Contacts' }}
        primaryAction={
          <PrimaryActions
            label="Do something"
            onClick={() => console.log('I do something')}
          />
        }
        moreActions={
          <MoreActions
            items={[
              [
                {
                  text: 'Do Action #1',
                  prefixIcon: <InvoiceSmall />,
                  onClick: () => {
                    console.log('Action #1');
                  },
                },
                DataExtension.manageCustomFieldsPageAction,
                {
                  text: 'Another Action #2',
                  prefixIcon: <VisibleSmall />,
                  onClick: () => {
                    console.log('Action #2');
                  },
                },
              ],
              [
                {
                  text: 'Do Action #3',
                  prefixIcon: <InvoiceSmall />,
                  onClick: () => {
                    console.log('Action #3');
                  },
                },
                Tags.manageTagsPageAction,
              ],
            ]}
          />
        }
      />
      <CollectionPage.Content>
        <Table
          tags={
            <Tags entityTypeName="Contact" bulkUpdateTags={async () => {}} />
          }
          dataExtension={<DataExtension />}
          state={state}
          columns={[
            {
              id: 'avatar',
              name: 'Avatar',
              title: '',
              width: '50px',
              hideable: false,
              render: (contact) => (
                <Avatar
                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
                  imgProps={{ src: contact.info?.picture?.image }}
                />
              ),
            },
            {
              id: 'name',
              title: 'Name',
              width: '250px',
              render: (contact) =>
                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
            },
          ]}
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```

## API

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `items` | `MoreActionsPropItem[] \| MoreActionsPropItem[][]` | No | - | Actions items that appear in the `MoreActions` popover menu. \ Actions can be grouped by using an array of arrays. \ Each sub-array represents a different group within the popover, \ and a divider will be rendered after each sub-array to separate the groups. \| [MoreActionsItem](./?path=/story/common-types--moreactionsitem)[][] |
| `containerId` | `string` | No | - | An id of the container defined in the installed on a site application that contains TPA's actions. |
| `containerProps` | `Record<string, any>` | No | - | Additional properties passed to the `onClick` of the container's extensions menu items. |
| `biAdditionalInfo` | `string` | No | - | Additional info for cairoPageCtaClicked BI event. |